<template>
  <!-- 详情 -->
  <el-dialog
    title=""
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      :model="addForm"
      :rules="basicRules"
      ref="ruleForm"
      label-width="auto"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            prop="uid"
            :label="$t('management.uniqueUserId')"
            class="is—required"
          >
            <el-input
              v-model="addForm.uid"
              clearable
              maxlength="20"
              show-word-limit
              placeholder="请输入用户唯一标识"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="username"
            :label="$t('management.userName')"
            class="is—required"
          >
            <el-input
              v-model="addForm.username"
              clearable
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="password"
            :label="$t('management.userPassword')"
            class="is—required"
          >
            <el-input
              type="password"
              clearable
              show-password
              v-model="addForm.password"
              placeholder="请输入用户密码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="realName" :label="$t('management.realName')">
            <el-input
              placeholder="请输入真实姓名"
              clearable
              v-model="addForm.realName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="company"
            :label="$t('management.institution')"
            class="is—required"
          >
            <el-input
              placeholder="请输入单位"
              clearable
              v-model="addForm.company"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('management.department')">
            <el-input
              placeholder="请输入部门"
              clearable
              v-model="addForm.department"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('management.emailAddress')">
            <el-input
              placeholder="请输入邮箱"
              clearable
              v-model="addForm.email"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('management.avatar')">
            <UploadImage @getMethod="getImgMethod" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import UploadImage from "@/components/upload/upload-image.vue";
export default {
  components: {
    UploadImage,
  },
  data() {
    function isNumberOrLowercaseLetter(value) {
      var pattern = /^[a-z0-9]+$/;
      return pattern.test(value);
    }
    var validateId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("management.missingId")));
      } else if (!isNumberOrLowercaseLetter(value)) {
        callback(
          new Error(this.$t("请输入数字加英文并且只能小写用于账号登录"))
        );
      } else {
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("management.missingUserName")));
      } else {
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("management.missingPassword")));
      } else {
        callback();
      }
    };
    var validateCompany = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("management.company")));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      addForm: {
        uid: "",
        username: "",
        password: "",
        company: "",
        realName: "",
        department: "",
        email: "",
        avatar: "",
      },
      basicRules: {
        uid: [{ required: true, validator: validateId, trigger: "blur" }],
        username: [
          {
            required: true,
            validator: validateName,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: validatePassword,
            trigger: "blur",
          },
        ],
        company: [
          {
            required: true,
            validator: validateCompany,
            trigger: "blur",
          },
        ],
      },
      avatarImg: "",
    };
  },
  methods: {
    getImgMethod(url) {
      this.$set(this.addForm, "avatar", url);
    },
    handleSubmit() {
      let self = this;
      this.$refs.ruleForm.validate((valid) => {
        //验证通过
        if (valid) {
          this.$confirm("是否确认此操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$post({
              url: "/user/add",
              params: this.addForm,
            }).then((res) => {
              this.$message({
                type: "success",
                message: this.$t("global.success"),
              });
              localStorage.setItem("secondActivedCode", "LOGIN_USER_MANAGE");
              this.handleClose();
              this.$parent.$parent.pageParams.current = 1;
              this.$parent.$parent.pageParams.size = 10;

              this.$parent.$parent.getList();
            });
          });
        } else {
          console.log("验证失败");
          return;
        }
      });
    },
    handleOpen() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.addForm = {};
      this.dialogVisible = false;
    },
  },
};
</script>
